<template>
  <div class="purchase-order-item-con">
    <div class="order-left">
      <div class="time-w flex-c warningColor" v-if="detail.gmtPlanDelivery && detail.status != 40">
        <p>交期剩余：</p>
        <count-down :key="Math.random()" color="#ff5151" :is-minus="true" :endDate="detail.gmtPlanDelivery" />
      </div>
      <div @click="openItemDetail('1')">
        <a-image width="200" height="200" fit="contain" :src="detail.productImg" :preview="false" />
      </div>
      <div class="label-w">
        <PurchaseLabelsPopover source="order" :labelAuth="labelAuth" :labels="detail.labels" :edit="true" :billInfo="detail" :showNum="3" @success="emit('update')" />
      </div>
    </div>
    <div class="order-right">
      <template v-if="source == 'purchase'">
        <div class="info-item flex-c-sb">
          <div class="name flex-c">
            <span>{{ detail.sku }}</span>
            <CopyText style="margin-left: 5px" :val="detail.sku" />
          </div>
          <a-checkbox v-model="detail.isChecked" @change="changeChecked" />
        </div>
        <div class="info-item flex-c-sb">
          <div class="flex-c">
            <span class="label">需求人：</span>
            <span class="val">{{ detail.salesmanName }}</span>
          </div>
          <span class="urgent" v-show="detail.urgent">急</span>
        </div>
        <div class="info-item flex-c-sb">
          <div class="flex-c">
            <span class="label">采购员：</span>
            <span class="val">{{ detail.purchaseUname }}</span>
          </div>
          <div class="message flex-c" @click="openItemDetail('3')">
            <i class="icon icon-liuyanguanli"></i>
            <span>{{ detail.leaveMsgCount < 100 ? detail.leaveMsgCount : '99+' }}</span>
          </div>
        </div>
        <div class="info-item flex-c">
          <span class="label">供应商：</span>
          <span class="val">{{ detail.supplierName }}</span>
        </div>
        <div class="info-item flex-c">
          <span class="label">收货仓：</span>
          <span class="val highlight cursor" @click="showWarehouseDialog = true">{{ detail.warehouseName }}({{ detail.warehouseCode }})</span>
        </div>
        <div class="info-item flex-c">
          <span class="label">采购单：</span>
          <div class="highlight flex-c">
            <span class="cursor" @click="showDetail = true">{{ detail.purchaseNo }}</span>
            <CopyText style="margin-left: 5px" :val="detail.purchaseNo" />
          </div>
        </div>
        <div class="info-item flex-c">
          <span class="label">采购数：</span>
          <span class="val">{{ detail.purchaseAmt }}</span>
        </div>
        <div class="info-item flex-c">
          <span class="label">已收货：</span>
          <span class="val">{{ detail.deliveryRealAmt }}</span>
        </div>
        <div class="info-item flex-c">
          <span class="label">交货中：</span>
          <span class="val">{{ detail.deliveringAmt }}</span>
        </div>
        <div class="info-item flex-c">
          <span class="label">已截单：</span>
          <span class="val">{{ detail.cutoffAmt }}</span>
        </div>
      </template>
      <template v-if="source == 'supplier'">
        <div class="info-item flex-c-sb">
          <div class="name flex-c">
            <span>{{ detail.sku }}</span>
            <CopyText style="margin-left: 5px" :val="detail.sku" />
          </div>
          <a-checkbox v-model="detail.isChecked" @change="changeChecked" />
        </div>
        <div class="info-item flex-c-sb">
          <div class="flex-c">
            <span class="label">采购方：</span>
            <span class="val">{{ detail.companyName }}</span>
          </div>
          <span class="urgent" v-show="detail.urgent">急</span>
        </div>
        <div class="info-item flex-c-sb">
          <div class="flex-c">
            <span class="label">采购员：</span>
            <span class="val">{{ detail.purchaseUname }}</span>
          </div>
          <div class="message flex-c" @click="openItemDetail('3')">
            <i class="icon icon-liuyanguanli"></i>
            <span>{{ detail.leaveMsgCount < 100 ? detail.leaveMsgCount : '99+' }}</span>
          </div>
        </div>
        <div class="info-item flex-c">
          <span class="label">采购单：</span>
          <div class="highlight flex-c">
            <span>{{ detail.purchaseNo }}</span>
            <CopyText style="margin-left: 5px" :val="detail.purchaseNo" />
          </div>
        </div>
        <div class="info-item flex-c">
          <span class="label">采购数：</span>
          <span class="val">{{ detail.purchaseAmt }}</span>
        </div>
        <div class="info-item flex-c">
          <span class="label">已收货：</span>
          <span class="val">{{ detail.deliveryRealAmt }}</span>
        </div>
        <div class="info-item flex-c">
          <span class="label">交货中：</span>
          <span class="val">{{ detail.deliveringAmt }}</span>
        </div>
        <div class="info-item flex-c">
          <span class="label">已截单：</span>
          <span class="val">{{ detail.cutoffAmt }}</span>
        </div>
        <div class="info-item flex-c">
          <span class="label">已排产：</span>
          <span class="val">{{ detail.productionAmt }}</span>
        </div>
      </template>

      <div class="info-item flex-c-end">
        <a-space>
          <a-popover position="bottom">
            <template #content>
              <div style="max-width: 400px">
                <p>品名：{{ detail.productName }}</p>
                <p>SKU：{{ detail.sku }}</p>
                <p>SPU：{{ detail.spu }}</p>
                <p>类目：{{ detail.cateName }}</p>
                <p>规格：{{ getProductSpecs(detail) }}</p>
                <p style="margin-bottom: 20px">备注：{{ detail.remark }}</p>
                <p v-for="(prop, k) in detail.purchaseSpecsArr" :key="k">
                  <span>{{ prop.name }}：</span>
                  <span>{{ getStrVal(prop.purchaseValue) }}</span>
                </p>
              </div>
            </template>
            <i class="icon popover-icon icon-wendang1"></i>
          </a-popover>
          <a-popover position="bottom">
            <template #content>
              <p>期望交货日期：{{ $setTime(detail.gmtExpectDelivery, 'YYYY-MM-DD') }}</p>
              <p>接单时间：{{ $setTime(detail.gmtAccept) }}</p>
              <p>首次交货时间：{{ $setTime(detail.gmtFirstDelivery) }}</p>
              <p>末次交货时间：{{ $setTime(detail.gmtLastDelivery) }}</p>
            </template>
            <i class="icon popover-icon icon-rili"></i>
          </a-popover>
        </a-space>
      </div>
    </div>
  </div>
  <!-- 仓库信息 -->
  <WarehouseInfo v-if="showWarehouseDialog" :isShow="showWarehouseDialog" :warehouseCode="detail.warehouseCode" @closed="showWarehouseDialog = false" />
  <!-- 采购单详情 -->
  <PurchaseOrderDetail v-if="showDetail" :isShow="showDetail" :source="source" :currentId="detail.billId" @closed="showDetail = false" />
  <!-- 采购单明细详情 -->
  <PurchaseOrderItemDetail v-if="showItemDetail" :labelAuth="labelAuth" :isShow="showItemDetail" :tab="tabName" :source="source" :currentItem="detail" @closed="showItemDetail = false" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { parseJson, getStrVal } from '@/utils'
  import CountDown from './countDown.vue'
  import PurchaseOrderItemDetail from './purchaseOrderItemDetail.vue'
  import PurchaseOrderDetail from './purchaseOrderDetail.vue'
  import PurchaseLabelsPopover from './purchaseLabelsPopover.vue'
  import WarehouseInfo from './warehouseInfo.vue'

  const emit = defineEmits(['changeChecked', 'update'])
  const props = defineProps({
    detail: {
      type: Object,
      default: () => {},
    },
    source: {
      type: String,
      default: 'purchase',
    },
    labelAuth: {
      type: Boolean,
    },
  })
  const tabName = ref()
  const showItemDetail = ref(false)
  const showWarehouseDialog = ref(false)
  const showDetail = ref(false)

  // 显示sku规格
  function getProductSpecs(item: any) {
    let productSpecs = item.productSpecs ? parseJson(item.productSpecs, []) : []
    return productSpecs.map((el: any) => el.valueCn)?.join('*') || '--'
  }
  // 选择
  function changeChecked(val: boolean) {
    emit('changeChecked', val, props.detail)
  }
  // 明细详情
  function openItemDetail(tab: string) {
    tabName.value = tab
    showItemDetail.value = true
  }
</script>

<style lang="less" scoped>
  .purchase-order-item-con {
    display: flex;
    border: 1px solid #dde2dd;
    position: relative;
    border-radius: 4px;
    box-shadow: 0 0 2px 1px #dde2dd;
    .order-left {
      position: relative;
      flex-shrink: 0;
      .time-w {
        padding: 2px 5px;
        background-color: var(--color-danger-light-1);
        font-size: 12px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
      }
      .label-w {
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 5px;
      }
    }
    .order-right {
      flex: 1;
      padding: 0 5px;
      .name {
        font-weight: bold;
        font-size: 14px;
      }
      .info-item {
        font-size: 13px;
        .label {
          color: #999;
        }
      }
      .message {
        color: #fff;
        border-radius: 20px;
        text-align: center;
        color: rgb(var(--primary-6));
        cursor: pointer;
        font-size: 14px;
      }
      .popover-icon {
        font-size: 16px;
        cursor: pointer;
        color: #666;
      }
    }
    .urgent {
      font-size: 12px;
      display: inline-block;
      background-color: red;
      color: #fff;
      width: 18px;
      border-radius: 50%;
      line-height: 18px;
      text-align: center;
      transform: scale(0.82);
    }
  }
</style>
